<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"  xmlns:c="http://java.sun.com/jsp/jstl/core"
				xmlns:rich="http://richfaces.org/rich"
				xmlns:a4j="http://richfaces.org/a4j">
	<div id="container">
		<h:form>
			<div id="navi">
				<span>
					<h:graphicImage value="/resources/image/homeicon.png" alt="image" width="15" height="15"/>
					<h:outputLink value="index.xhtml" class="navi_button">Back to Entry</h:outputLink>
				</span>
				|
				<span>
					<h:graphicImage value="/resources/image/searchicon.jpg" alt="image" width="15" height="15"/>
					<h:outputLink value="customerSearchOrder.xhtml" class="navi_button">Search Purchases</h:outputLink>
				</span>
				|
				<span class="navi_current">
					Browse
				</span>
				>
				<span>
					<h:outputLink value="cart.xhtml" class="navi_link">Shopping Cart</h:outputLink>
				</span>
				>
				<span class="navi_future">Check Out</span>
				>
				<span class="navi_future">Confirm</span>
				>
				<span class="navi_future">Finish</span>
			</div>
			<div id="browse_category">
				<div class="content_head">
					<span>Categories</span>
				</div>
				<div class="content_body">
					<ul>
						<c:forEach items="#{browser.productCategories}" var="productCategory">
							<div class="content_body_grid">
							<li>
								<a4j:commandLink actionListener="#{browser.setCurrentProductCategory(productCategory)}" value="#{productCategory.name}" render="@form" />
							</li>
							</div>
						</c:forEach>
					</ul>
					
				</div>
			</div>
			<div id="browse_content">
				<div class="content_head">
					<span>Products</span>
				</div>
				<div class="content_body">
					<rich:dataTable id="browse_products" value="#{browser.productsOfCurrentProductCategory}" var="product" rows="#{browser.maxCountOfProductPerPage}" styleClass="data">
						<rich:column style="width: 10%">
							<f:facet name="header">
								ID
							</f:facet>
							<h:outputText value="#{product.id}" />
						</rich:column>
						<rich:column style="width: 50%">
							<f:facet name="header">
								Name
							</f:facet>
							<a4j:commandLink value="#{product.name}" actionListener="#{browser.setCurrentProduct(product)}" styleClass="browse_data_link" render="@form" oncomplete="#{rich:component('productPanel')}.show();" />
						</rich:column>
						<rich:column style="width: 20%">
							<f:facet name="header">
								Category
							</f:facet>
							<h:outputText value="#{product.category.name}" />
						</rich:column>
						<rich:column style="width: 20%">
							<f:facet name="header">
								Price
							</f:facet>
							AU$ <h:outputText value="#{product.price}" />
						</rich:column>
						<f:facet name="footer">
							<rich:dataScroller id="scroller" rendered="#{browser.productsOfCurrentProductCategory.size() > browser.maxCountOfProductPerPage}" />
						</f:facet>
					</rich:dataTable>
				</div>
			</div>
			<div class="footnav">
				<span><h:commandButton class="footnav_button" value="&lt;&lt; Back" disabled="true" /></span>
				<span><h:commandButton class="footnav_button" onclick="location.href='cart.xhtml'" value="Next &gt;&gt;" type="button" /></span>
			</div>
			<rich:popupPanel id="productPanel" modal="true" autosized="true" resizeable="false" onmaskclick="#{rich:component('productPanel')}.hide();" domElementAttachment="form" style="text-align: left;">
				<f:facet name="controls">
					<h:outputLink value="#" onclick="#{rich:component('productPanel')}.hide(); return false;">
						X
					</h:outputLink>
				</f:facet>
				<f:facet name="header">
					<h:outputText value="Product Details" />
				</f:facet>
				<h:panelGrid columns="2">
					<h:outputText value="ID:" />
					<h:outputText value="#{browser.currentProduct.id}" />
					<h:outputText value="Category" />
					<h:outputText value="#{browser.currentProduct.category.name}" />
					<h:outputText value="Name:" />
					<h:outputText value="#{browser.currentProduct.name}" />
					<h:outputText value="Price:" />
					<h:outputText value="AU$ #{browser.currentProduct.price}" />
					<h:outputText value="Stock:" />
					<h:outputText value="#{browser.currentProduct.stock}" />
					<h:outputText value="Description:" />
					<h:outputText value="#{browser.currentProduct.description}" />
					<h:outputText value="Out of Stock!" rendered="#{browser.currentProduct.stock &lt; 1}" style="color: #BD112E" />
					<rich:inputNumberSpinner inputSize="5" minValue="1" maxValue="#{browser.currentProduct.stock}" value="#{cart.inputProductQuantity}" rendered="#{browser.currentProduct.stock &gt; 0}" />
					<a4j:commandButton value="Add to Cart" actionListener="#{cart.addProduct(browser.currentProduct)}" execute="@form" render="messagePanel" oncomplete="#{rich:component('productPanel')}.hide();" rendered="#{browser.currentProduct.stock &gt; 0}" />
				</h:panelGrid>
			</rich:popupPanel>
			<rich:notifyMessages stayTime="5000" nonblocking="true" />
		</h:form>
	</div>
</ui:composition>
